<template>
    <view class="page" :style="themeColor">
        <view class="flex align-stretch benben-position-layout flex searchResult_flex_0" :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
            <view class='flex align-center justify-between flex-sub searchResult_fd0_0'>
                <view class='flex align-center justify-center searchResult_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
                    <text class='fu-iconfont2  searchResult_fd0_0_c0_c0'>&#xE794;</text>
                </view>
                <view class='flex align-center flex-sub searchResult_fd0_0_c1'>
                    <input class='flex-sub searchResult_fd0_0_c1_c0' type="text" :focus='true' placeholder="请输入关键字" confirm-type="done" :maxlength="-1" placeholder-style="color:rgba(191, 191, 191, 1);font-size:28rpx" v-model="keyword" />
                    <image class='searchResult_fd0_0_c1_c1' :src='STATIC_URL+"27.png"' @tap.stop="clearFunc()" v-if="keyword!=''"></image>
                </view>
                <view class='flex flex-wrap align-center justify-center searchResult_fd0_0_c2'>
                    <image class='searchResult_fd0_0_c2_c0' mode="aspectFit" :src='STATIC_URL+"75.png"'></image>
                </view>
            </view>

        </view>
        <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
        <!---flex布局flex布局开始-->
        <view class="flex benben-flex-layout flex-wrap align-center">
            <view>
                <benben-flex-tabs class-name='searchResult_benbenTabsfd1_0' v-model="taps" ref="benben_tabsfd1_0" select-mark="benben_tabsfd1_0" key="benben_tabsfd1_0" :open-title-type='false' :open-sticky='true' :top='0' :is-show-content='false' :scrollspy='false' :tabs-info.sync="tabsInfofd1_0">

                    <scroll-view @scroll="tabsInfofd1_0.scrollX = $event.detail.scrollLeft" id="benben_tabsfd1_0" class="benben-tabs" style="width:750rpx" :scroll-x="true" :scroll-left.sync="tabsInfofd1_0.moveX" scroll-with-animation="all .3s ease">
                        <view class="benben-tabs-content" id="benben_tabsfd1_0-content">
                            <view id="benben_tabsfd1_0-title" class="benben-tabs-title flex flex align-center justify-around">
                                <view :class="{ 'checkTitlefd1_0': taps == '1', 'flex flex-wrap align-center': true }" @tap="taps = '1'" :id="`benben_tabsfd1_0-title-item-${'1'}`">

                                    <text>新闻资讯</text>

                                </view>
                                <view :class="{ 'checkTitlefd1_0': taps == '2', 'flex flex-wrap align-center': true }" @tap="taps = '2'" :id="`benben_tabsfd1_0-title-item-${'2'}`">

                                    <text>课程</text>

                                </view>
                            </view>
                            <view :style="{ left: tabsInfofd1_0.lineleft, maxWidth: tabsInfofd1_0.lineWidth }" id="benben_tabsfd1_0-line" class="benben-tabs-line flex benben-flex-tabs-line searchResult_linefd1_0"></view>
                        </view>
                    </scroll-view>

                </benben-flex-tabs>

            </view>
        </view>

        <!---flex布局flex布局结束-->
        <!---新闻资讯flex布局开始-->
        <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout searchResult_flex_2" v-if="taps=='1'">
            <view class='flex flex-wrap align-center justify-end searchResult_fd2_0' @tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/index/messageDetails/messageDetails?aid=1`">
                <view class='flex flex-direction flex-wrap align-stretch flex-sub'>
                    <text class='searchResult_fd2_0_c0_c0'>保利集团召开党委理论中心组学习会专题学习党的二十届二中全会...</text>
                    <text class='searchResult_fd2_0_c0_c1'>2023-05-07 12:00</text>
                </view>
                <view class='flex flex-wrap align-center searchResult_fd2_0_c1'>
                    <image class='searchResult_fd2_0_c1_c0' mode="aspectFit" :src='STATIC_URL+"25.png"'></image>
                </view>
            </view>
        </view>

        <!---新闻资讯flex布局结束-->
        <!---课程flex布局开始-->
        <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout searchResult_flex_3" v-if="taps=='2'">
            <view class='flex flex-wrap align-center justify-end searchResult_fd3_0' @tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/course/courseDetails/courseDetails?aid=1`">
                <view class='flex flex-wrap align-center searchResult_fd3_0_c0'>
                    <image class='searchResult_fd3_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"25.png"'></image>
                </view>
                <view class='flex flex-direction flex-wrap align-stretch flex-sub'>
                    <text class='searchResult_fd3_0_c1_c0'>工业炸药安全存储管理</text>
                    <view class='flex flex-wrap align-center searchResult_fd3_0_c1_c1'>
                        <text class='searchResult_fd3_0_c1_c1_c0'>发布：</text>
                        <text class='searchResult_fd3_0_c1_c1_c0'>2023-05-06</text>
                    </view>
                    <view class='flex flex-wrap align-center justify-between searchResult_fd3_0_c1_c2'>
                        <view class='flex flex-wrap align-center'>
                            <text class='searchResult_fd3_0_c1_c1_c0'>共</text>
                            <text class='searchResult_fd3_0_c1_c1_c0'>10</text>
                            <text class='searchResult_fd3_0_c1_c1_c0'>章节</text>
                        </view>
                        <view class='flex flex-wrap align-center'>
                            <text class='searchResult_fd3_0_c1_c1_c0'>56</text>
                            <text class='searchResult_fd3_0_c1_c1_c0'>人学习</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!---课程flex布局结束-->
        <!---flex布局flex布局开始-->
        <view class="flex benben-flex-layout flex-wrap align-center">
            <benben-empty>
                <view class='flex flex-direction flex-wrap align-center searchResult_fd4_0'>
                    <image class='searchResult_fd4_0_c0' mode="widthFix" :src='STATIC_URL+"29.png"'></image>
                    <text class='searchResult_fd4_0_c1'>暂无数据</text>

                </view>
            </benben-empty>
        </view>

        <!---flex布局flex布局结束-->


    </view>
</template>
<script>
    export default {
        components: {},


        data() {
            return {
                "tabsInfofd1_0": {
                    lineleft: '',
                    lineWidth: '',
                    moveX: 0,
                    scrollX: 0,
                    PageScrollX: 0
                },
                "taps": 1,
                "keyword": ""
            };
        },
        computed: {
            themeColor() {
                return this.$store.getters.themeColor
            },

        },
        watch: {},
        onLoad(options) {
            let {
                keyword
            } = options
            if (keyword !== undefined) this.keyword = keyword
        },
        onUnload() {

        },
        onReady() {

        },
        onShow() {

        },
        onHide() {

        },
        onResize() {

        },
        onPullDownRefresh() {

        },
        onReachBottom(e) {

        },
        onPageScroll(e) {

        },
        methods: {
            //添加历史记录
            addHistorySearchFunc() {
                this.$store.commit('appSearchHistoryAdd', {
                    "name": this.keyword
                })
            },
            //清空
            clearFunc() {
                this.keyword = '';
            }
        }
    };
</script>
<style lang="scss" scoped>
    .page {
        width: 100vw;
        overflow-x: hidden;
        min-height: calc(100vh - var(--window-bottom));
        background: var(--benbenbgColor1);
        background-size: 100% auto !important;
    }

    .searchResult_flex_0 {
        background: #fff;
        width: 100%;
        height: 88rpx;
        overflow: hidden;
        z-index: 10;
        top: 0rpx;
        background-size: 100% auto !important;
    }

    .searchResult_fd0_0_c2_c0 {
        width: 36rpx;
        height: 36rpx;
    }

    .searchResult_fd0_0_c2 {
        margin: 0rpx 0rpx 0rpx 24rpx;
        width: 50rpx;
        height: 50rpx;
    }

    .searchResult_fd0_0_c1_c1 {
        width: 28rpx;
        height: 28rpx;
        border-radius: 0rpx 0rpx 0rpx 0rpx;
    }

    .searchResult_fd0_0_c1_c0 {
        font-size: 28rpx;
        font-weight: 400;
        color: #333;
    }

    .searchResult_fd0_0_c1 {
        background: #F9F9F9;
        height: 64rpx;
        border-radius: 34rpx 34rpx 34rpx 34rpx;
        padding: 0rpx 24rpx 0rpx 24rpx;
        margin: 0rpx 0rpx 0rpx 24rpx;
    }

    .searchResult_fd0_0_c0_c0 {
        font-size: 32rpx;
        color: #333;
        line-height: 28rpx;
    }

    .searchResult_fd0_0_c0 {
        width: 50rpx;
        height: 50rpx;
    }

    .searchResult_fd0_0 {
        padding: 0rpx 32rpx 0rpx 32rpx;
        line-height: 88rpx;
    }

    .searchResult_linefd1_0 {
        background: url(/static/images/28.png) no-repeat, transparent;
        width: 70rpx;
        height: 20rpx;
        top: 55rpx;
        background-size: 100% auto !important;
    }

    .checkTitlefd1_0 {
        font-weight: 700 !important;
        font-size: 28rpx !important;
        color: rgba(51, 51, 51, 1) !important;
        background-color: rgba(255, 255, 255, 1) !important;
    }

    ::v-deep .searchResult_benbenTabsfd1_0 {
        background: #fff;
        width: 100%;
        height: 90rpx;
        white-space: nowrap;
        text-align: center;
        color: rgba(102, 102, 102, 1);
    }

    .searchResult_flex_2 {
        padding: 0rpx 32rpx 0rpx 32rpx;
    }

    .searchResult_fd2_0_c1_c0 {
        width: 258rpx;
        height: 160rpx;
        border-radius: 0rpx 0rpx 0rpx 0rpx;
    }

    .searchResult_fd2_0_c1 {
        margin: 0rpx 0rpx 0rpx 24rpx;
        border-radius: 16rpx;
    }

    .searchResult_fd2_0_c0_c1 {
        color: #999999;
        font-size: 24rpx;
        font-weight: 400;
        line-height: 33rpx;
        margin: 47rpx 0rpx 0rpx 0rpx;
    }

    .searchResult_fd2_0_c0_c0 {
        color: #333333;
        font-size: 28rpx;
        font-weight: 700;
        line-height: 40rpx;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }

    .searchResult_fd2_0 {
        border-bottom: 1px solid #eee;
        padding: 32rpx 0rpx 32rpx 0rpx;
    }

    .searchResult_flex_3 {
        padding: 0rpx 32rpx 0rpx 32rpx;
    }

    .searchResult_fd3_0_c1_c2 {
        margin: 44rpx 0rpx 0rpx 0rpx;
    }

    .searchResult_fd3_0_c1_c1_c0 {
        color: #636363;
        font-size: 24rpx;
        font-weight: 400;
        line-height: 40rpx;
    }

    .searchResult_fd3_0_c1_c1 {
        margin: 10rpx 0rpx 0rpx 0rpx;
    }

    .searchResult_fd3_0_c1_c0 {
        color: #333333;
        font-size: 28rpx;
        font-weight: 700;
        line-height: 40rpx;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }

    .searchResult_fd3_0_c0_c0 {
        width: 258rpx;
        height: 160rpx;
        border-radius: 0rpx 0rpx 0rpx 0rpx;
    }

    .searchResult_fd3_0_c0 {
        border-radius: 16rpx;
        margin: 0rpx 24rpx 0rpx 0rpx;
    }

    .searchResult_fd3_0 {
        border-bottom: 1px solid #eee;
        padding: 32rpx 0rpx 32rpx 0rpx;
    }

    .searchResult_fd4_0_c1 {
        padding: 30rpx 0rpx 0rpx 0rpx;
        color: #929292;
    }

    .searchResult_fd4_0_c0 {
        width: 312rpx;
        border-radius: 0rpx 0rpx 0rpx 0rpx;
        height: 312rpx;
    }

    .searchResult_fd4_0 {
        width: 100%;
        margin: 124rpx 0rpx 0rpx 0rpx;
    }
</style>